<template>
	<view>
		<view class="tab-content">
			<slot />
		</view>	
		<view class="tabbar">
			<view class="navigator">
				<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
					@click="checkModel(index)">
					<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
					<img :src="item.selectedIconPath" class="icon" v-else>
					<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
 
</template>
 
<script>
import {switchMode,deviceList} from "@/api/api.js";
	export default {
		// watch: {
		// 	$route: {
		// 		immediate: true,
		// 		handler(to) {
		// 			if (to && to.meta.isTabBar) {
		// 				// this.__path__ = this.$route.path
		// 				// this.showselected = true
		// 				const index = this.tabBar.list.findIndex(item => to.meta.pagePath === item.pagePath)
		// 				if (index > -1) {
		// 					this.selectedIndex = index
		// 				}
		// 			}
		// 		}
		// 	}
		// },
		data() {
			return {
				selectedIndex: uni.getStorageSync('selectedIndex') || 0,
				//showselected: true,
				tabBar: {
					list: [{
						"pagePath": "pages/index/index",
						"iconPath": "static/img/a3.png",
						"selectedIconPath": "static/img/a1.png",
						"text": "手控"
					}, {
						"pagePath": "pages/skms/index",
						"iconPath": "static/img/b2.png",
						"selectedIconPath": "static/img/b1.png",
						"text": "时控"
					}, {
						"pagePath": "pages/wkms/index",
						"iconPath": "static/img/c2.png",
						"selectedIconPath": "static/img/c1.png",
						"text": "温控"
				
					}
					]
				},
				model:0
			}
		},
		mounted() {
			this.selected()
		},	
		methods: {  
			checkModel(index) {
				uni.showModal({
				    title: "提示",
				    content: "确认要切换到该模式吗？",
				    success: function (res) {
				       if (res.confirm) {
							   let obj ={
								  model:index
								 }
								uni.showLoading({  title: '请稍后' });
							    switchMode(obj).then(res => { 
									 let list= [{"pagePath":"pages/index/index","iconPath":"static/img/a3.png","selectedIconPath":"static/img/a1.png","text":"手控"},{"pagePath":"pages/skms/index","iconPath":"static/img/b2.png","selectedIconPath":"static/img/b1.png","text":"时控"},{"pagePath":"pages/wkms/index","iconPath":"static/img/c2.png","selectedIconPath":"static/img/c1.png","text":"温控"}];
									   list.forEach((v, i) => {
										if (res.code == i) {
										 this.selectedIndex=res.code
										 uni.switchTab({url:"/"+v.pagePath })
										 uni.showToast({ title: res.msg, duration: 2000})
										}
									})							
							   })
				       }  
				   },
				});
				
			},
			//进入页面选中已切换的模式
			selected() { 
				let param = {
					phone: "18793002958"
				} 
				 deviceList(param).then(res => {
					if (res.code == 0 && res.data) {  
						 if(res.data.length>0){
							this.model = res.data[0].model
							 this.selectedIndex=this.model
							 this.tabBar.list.forEach((v, i) => {  
							 	if (this.model ===i) {
							 	 uni.switchTab({url:"/"+v.pagePath })
							 	}
							 })
						 }
					} 
				 })
			}, 
		},
	}
</script>
 
<style>
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		z-index: 999;
		background: #1a93ff;
		border-top: 2rpx solid #eee;
	}
 
	.navigator {
		display: flex;
		justify-content: space-between;
		width: 85%;
		margin: 0 auto;
		padding: 20rpx;
	}
 
	.navigator-item {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 50rpx;
		height: 80%;
		 
	}
	.navigator[data-v-131ce826] {
	    display: flex;
	    justify-content: space-between;
	    width: 85%;
	    margin: 0 auto;
	    padding: 4px;
	}
 
	.item-text {
		margin-top: 6rpx;
		color: #83cafe;
		font-size: 24rpx;
	}
 
	.text-active {
		color: #ffffff !important;
	}
 
	.icon {
		width: 25px;
		height: 25px;
	}
</style>